<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
      body {
        background-color: #fff; /* 设置背景颜色为白色 */
      }
    </style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '叶玉婷 数据成都和算法成都学历要求',
          left: 'center',
          textStyle: {
            color: '#333', /* 设置字体颜色为深色以确保可见 */
            fontSize: 18,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#666', /* 设置副标题字体颜色 */
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#333', /* 设置提示框字体颜色 */
            }
          },
          backgroundColor: '#fff',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            color: '#333' /* 设置提示框字体颜色 */
          }
        },
        legend: {
          data: ['数据成都', '算法成都'],
          left: '80%',
          textStyle: {
            color: '#333' /* 设置图例字体颜色 */
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['大专', '本科', '硕士', '博士', '2年经验'],
          axisLine: {
            lineStyle: {
              color: '#333' /* 设置坐标轴颜色 */
            }
          },
          axisLabel: {
            color: '#333' /* 设置坐标轴标签颜色 */
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333' /* 设置坐标轴颜色 */
            }
          },
          axisLabel: {
            color: '#333' /* 设置坐标轴标签颜色 */
          }
        },
        series: [
          {
            name: '数据成都',
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(255, 192, 203, 1)' }, // 淡粉色
                  { offset: 1, color: 'rgba(255, 105, 180, 1)' }  // 深粉色
                ],
                global: false // 缺省为 false
              },
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            data: [46.0, 86.0, 7.0, 0.0, 0.0],
            label: {
              show: true,
              position: 'top',
              color: '#fff', /* 设置数据标签颜色 */
            }
          },
          {
            name: '算法成都',
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(173, 216, 230, 1)' }, // 浅蓝色
                  { offset: 1, color: 'rgba(41, 128, 185, 1)' }  // 深蓝色
                ],
                global: false // 缺省为 false
              },
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            data: [0.0, 126.0, 85.0, 5.0, 1.0],
            label: {
              show: true,
              position: 'top',
              color: '#fff', /* 设置数据标签颜色 */
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return Math.random() * 200;
        }
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>